<template>
	<div class="container">


		<div class="nav">
			<div class="card" @click="repair()">
				<img src="@/assets/images/repair.png" />
				<span>
					<div>故障报修</div>
					<div>业主待维修</div>
				</span>
			</div>
			<div class="card" @click="home()">
				<img src="@/assets/images/home.png" />
				<span>
					<div>房屋租赁</div>
					<div>租赁收费</div>
				</span>
			</div>
			<div class="card" @click="cost()">
				<img src="@/assets/images/cost.png" />
				<span>
					<div>收费缴纳</div>
					<div>收银台缴纳费用</div>
				</span>
			</div>
			<div class="card" @click="car()">
				<img src="@/assets/images/park.png" />
				<span>
					<div>车位租赁</div>
					<div>停车位</div>
				</span>
			</div>
		</div>

		<div class="box">
			<el-card class="tb">
				<div id="main" style="width:100%;height:400px;"></div>
			</el-card>
			<el-card class="tb">
				<div id="main2" style="width:100%;height:400px;"></div>
			</el-card>
		</div>
	</div>
</template>






<script>
	import * as echarts from 'echarts';
	import {
		getList,
	} from "@/api/charge/tb";

	export default {
		data() {
			return {
				park: {

				},
				area: {

				},
				yb: {

				},
				t1: 1,
				t2: 1
			}
		},
		methods: {
			repair() {
				this.$router.push({
					path: '/rcgl/repair'
				})
			},
			home() {
				this.$router.push({
					path: '/rent/roomRent'
				})
			},
			cost() {
				this.$router.push({
					path: '/rcgl/jnfy'
				})
			},
			car() {
				this.$router.push({
					path: '/rent/pakingRent'
				})
			},
			list() {
				getList().then(res => {
					this.park = res.data[0]
					this.area = res.data[1]
					this.yb = res.data[2]
					this.jt()
					this.jt2()
				})
			},
			jt2() {

				var chartDom = document.getElementById('main2');
				var myChart = echarts.init(chartDom);
				var option;

				option = {
					color: ['#99d1d3'],
					tooltip: {
						trigger: 'axis',
						axisPointer: {
							type: 'shadow'
						}
					},
					grid: {
						left: '3%',
						right: '4%',
						bottom: '10%',
						containLabel: true
					},
					xAxis: [{
						type: 'category',
						data: ['应缴费用', '已收费用', '待缴费用'],
						axisTick: {
							alignWithLabel: true
						}
					}],
					yAxis: [{
						type: 'value'
					}],
					series: [{
						name: '金额',
						type: 'bar',
						barWidth: '60%',
						data: [this.park.tbNeedMoney + this.area.tbNeedMoney + this.yb.tbNeedMoney, this
							.park.tbPayMoney + this.area.tbPayMoney + this.yb.tbPayMoney, this.park
							.tbNeedMoney + this.area.tbNeedMoney + this.yb.tbNeedMoney - (this.park
								.tbPayMoney + this.area.tbPayMoney + this.yb.tbPayMoney)
						]
					}]
				};

				option && myChart.setOption(option);

			},
			jt() {
				var chartDom = document.getElementById('main');
				var myChart = echarts.init(chartDom);

				var option;

				option = {
					legend: {},
					color: ['#98d0b9', '#f5a89a'], //#fcdad5','#c9e4d6  98d0b9 f5a89a
					tooltip: {},
					dataset: {
						source: [
							['product', 'park', "area", 'yb'],
							['已缴费', this.park.tbPayMoney, this.area.tbPayMoney, this.yb.tbPayMoney],
							['未缴费', this.park.tbNeedMoney - this.park.tbPayMoney, this.area.tbNeedMoney -
								this.area.tbPayMoney, this.yb.tbNeedMoney - this.yb.tbPayMoney
							]
						]
					},
					title: [{
							subtext: '车位费',
							left: '16.67%',
							top: '80%',
							textAlign: 'center',

						},
						{
							subtext: '物业费',
							left: '50%',
							top: '80%',
							textAlign: 'center',

						},
						{
							subtext: '水电费',
							left: '83.33%',
							top: '80%',
							textAlign: 'center',

						}
					],
					series: [

						// {
						// 	type: 'pie',
						// 	radius: '20%',
						// 	center: ['25%', '30%']
						// 	// No encode specified, by default, it is '2012'.
						// },
						{
							type: 'pie',
							radius: '25%',
							center: ['16.67%', '50%'],
							encode: {
								itemName: 'product',
								value: 'park'
							}
						},
						{
							type: 'pie',
							radius: '25%',
							center: ['50%', '50%'],
							encode: {
								itemName: 'product',
								value: 'area'
							}
						},
						{
							type: 'pie',
							radius: '25%',
							center: ['83.33%', '50%'],
							encode: {
								itemName: 'product',
								value: 'yb'
							},
						}
					]
				};

				option && myChart.setOption(option);

			}
		},

		mounted() {
			// 调用静态函数
			this.list()

		}
	}
</script>

<style scoped>
	.container {
		width: 100%;
		padding: 20px 30px;
		background-color: #EFF0F2;
		box-sizing: border-box;
	}

	.box {
		width: 100%;
		display: flex;
		justify-content: space-between;
	}

	.title {
		text-align: center;
		font-size: 30px;
		letter-spacing: 5px;
		font-weight: 600;
		color: #5a5a5a;
	}

	.box .tb {
		height: 400px;

		width: 600px;
	}

	.nav {
		width: 100%px;
		height: 150px;
		margin-bottom: 20px;
		display: flex;
		justify-content: space-between;
	}

	.nav .card {
		width: 24%;
		display: flex;
		background-color: white;
		flex-direction: row;
		justify-content: center;
		/* 垂直居中对齐 */
		align-items: center;

		/* 文字水平居中对齐 */
		border-radius: 20px 20px 20px 20px;
	}

	/* 基础样式 */
	.nav .card {
		transition: box-shadow 0.3s, transform 0.3s;
	}

	/* 鼠标悬浮时的样式 */
	.nav .card:hover {
		box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
		transform: translateY(-5px);
		cursor: pointer;
	}

	.nav .card img {
		width: 50px;
		height: 50px;
	}

	..nav .card span {

		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}

	.nav .card span>div:first-child {
		margin-left: 10px;
		text-align: center;
		font-size: 25px;
		letter-spacing: 2px;
	}

	.nav .card span>div:nth-child(2) {
		text-align: center;
		font-size: 13px;
		color: #888;

	}
</style>